<!DOCTYPE html><html><head><title>Ext.util.Animate | Ext JS 4.0 Documentation</title><script type="text/javascript" src="../ext-all.js"></script><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../scrollbars.css" type="text/css"><link rel="stylesheet" href="../docs.css" type="text/css"><link id="styleCss" rel="stylesheet" href="../style.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script><link rel="stylesheet" href="../prettify.css" type="text/css"><!-- link(rel: 'stylesheet', href: req.baseURL + '/css/ext4.css', type: 'text/css')--><link rel="shortcut icon" type="image/ico" href="../favicon.ico"><!--[if IE]>
<style type="text/css">.head-band { display: none; }
.header { border: 0; top: 0; left: 0px; background: url(../header.gif) repeat-x; }
.doc-tab .members .member a.more { background-color: #efefef; }
</style><link rel="stylesheet" href="/new/css/ie.css" type="text/css"><![endif]-->
</head><body id="ext-body" class="iScroll"><div id="notice" class="notice">For up to date documentation and features, visit 
<a href="http://docs.sencha.com/ext-js/4-0">http://docs.sencha.com/ext-js/4-0</a></div><div class="wrapper"><div class="head-band"></div><div class="header"><h2><a href="../index.html">Sencha Documentation</a></h2></div><div id="search"><form><input type="text" placeholder="Search" id="search-field" autocomplete="off" name="q"></form><div id="search-box"></div></div><div id="treePanel"></div><div id="container"><script type="text/javascript">

    req = {
        liveURL: '.',
        standAloneMode: true,
        origDocClass: 'Ext.util.Animate',
        docClass: 'Ext.util.Animate',
        docReq: 'Ext.util.Animate',
        version: '4.0',
        baseURL: '.',
        baseDocURL: '.',
        baseProdURL: '.'
    };

    clsInfo = {};



</script>

<script type="text/javascript" src="../search.js"></script>
<!--script type="text/javascript" src="/new/javascripts/app/examples.js"></script-->
<script type="text/javascript" src="../class_tree.js"></script>
<script type="text/javascript" src="../class_doc.js"></script>
<script type="text/javascript">
    req.source = 'Animate.html#Ext-util.Animate';
    clsInfo = {"methods":["animate","getActiveAnimation","sequenceFx","stopAnimation","syncFx"],"cfgs":[],"properties":["hasActiveFx","stopFx"],"events":[],"subclasses":[]};
    Ext.onReady(function() {
        Ext.create('Docs.classPanel');
    });
</script><div id="top-block" class="top-block"><h1 id="clsTitle" class="cls"><a href="../source/Animate.html#Ext-util.Animate" target="_blank">Ext.util.Animate</a></h1></div><div id="docContent"><div id="doc-overview-content"><div class="lft"><p>This animation class is a mixin.</p>

<p>Ext.util.Animate provides an API for the creation of animated transitions of properties and styles.<br/>
This class is used as a mixin and currently applied to <a href="Ext.core.Element.html" rel="Ext.core.Element" class="docClass">Ext.core.Element</a>, <a href="Ext.CompositeElement.html" rel="Ext.CompositeElement" class="docClass">Ext.CompositeElement</a>,
<a href="Ext.draw.Sprite.html" rel="Ext.draw.Sprite" class="docClass">Ext.draw.Sprite</a>, <a href="Ext.draw.CompositeSprite.html" rel="Ext.draw.CompositeSprite" class="docClass">Ext.draw.CompositeSprite</a>, and <a href="Ext.Component.html" rel="Ext.Component" class="docClass">Ext.Component</a>.  Note that Components
have a limited subset of what attributes can be animated such as top, left, x, y, height, width, and
opacity (color, paddings, and margins can not be animated).</p>

<h2>Animation Basics</h2>

<p>All animations require three things - <code>easing</code>, <code>duration</code>, and <code>to</code> (the final end value for each property)
you wish to animate. Easing and duration are defaulted values specified below.
Easing describes how the intermediate values used during a transition will be calculated.
<a href="Ext.fx.Anim.html#easing" rel="Ext.fx.Anim#easing" class="docClass">Easing</a> allows for a transition to change speed over its duration.
You may use the defaults for easing and duration, but you must always set a
<a href="Ext.fx.Anim.html#to" rel="Ext.fx.Anim#to" class="docClass">to</a> property which is the end value for all animations.</p>

<p>Popular element 'to' configurations are:</p>

<ul>
<li>opacity</li>
<li>x</li>
<li>y</li>
<li>color</li>
<li>height</li>
<li>width</li>
</ul>


<p>Popular sprite 'to' configurations are:</p>

<ul>
<li>translation</li>
<li>path</li>
<li>scale</li>
<li>stroke</li>
<li>rotation</li>
</ul>


<p>The default duration for animations is 250 (which is a 1/4 of a second).  Duration is denoted in
milliseconds.  Therefore 1 second is 1000, 1 minute would be 60000, and so on. The default easing curve
used for all animations is 'ease'.  Popular easing functions are included and can be found in <a href="Ext.fx.Anim.html#easing" rel="Ext.fx.Anim#easing" class="docClass">Easing</a>.</p>

<p>For example, a simple animation to fade out an element with a default easing and duration:</p>

<pre class="prettyprint"><code>var p1 = Ext.get('myElementId');

p1.animate({
    to: {
        opacity: 0
    }
});
</code></pre>

<p>To make this animation fade out in a tenth of a second:</p>

<pre class="prettyprint"><code>var p1 = Ext.get('myElementId');

p1.animate({
   duration: 100,
    to: {
        opacity: 0
    }
});
</code></pre>

<h2>Animation Queues</h2>

<p>By default all animations are added to a queue which allows for animation via a chain-style API.
For example, the following code will queue 4 animations which occur sequentially (one right after the other):</p>

<pre class="prettyprint"><code>p1.animate({
    to: {
        x: 500
    }
}).animate({
    to: {
        y: 150
    }
}).animate({
    to: {
        backgroundColor: '#f00'  //red
    }
}).animate({
    to: {
        opacity: 0
    }
});
</code></pre>

<p>You can change this behavior by calling the <a href="Ext.util.Animate.html#syncFx" rel="Ext.util.Animate#syncFx" class="docClass">syncFx</a> method and all
subsequent animations for the specified target will be run concurrently (at the same time).</p>

<pre class="prettyprint"><code>p1.syncFx();  //this will make all animations run at the same time

p1.animate({
    to: {
        x: 500
    }
}).animate({
    to: {
        y: 150
    }
}).animate({
    to: {
        backgroundColor: '#f00'  //red
    }
}).animate({
    to: {
        opacity: 0
    }
});
</code></pre>

<p>This works the same as:</p>

<pre class="prettyprint"><code>p1.animate({
    to: {
        x: 500,
        y: 150,
        backgroundColor: '#f00'  //red
        opacity: 0
    }
});
</code></pre>

<p>The <a href="Ext.util.Animate.html#stopAnimation" rel="Ext.util.Animate#stopAnimation" class="docClass">stopAnimation</a> method can be used to stop any
currently running animations and clear any queued animations.</p>

<h2>Animation Keyframes</h2>

<p>You can also set up complex animations with <a href="Ext.fx.Anim.html#keyframe" rel="Ext.fx.Anim#keyframe" class="docClass">keyframe</a> which follows the
CSS3 Animation configuration pattern. Note rotation, translation, and scaling can only be done for sprites.
The previous example can be written with the following syntax:</p>

<pre class="prettyprint"><code>p1.animate({
    duration: 1000,  //one second total
    keyframes: {
        25: {     //from 0 to 250ms (25%)
            x: 0
        },
        50: {   //from 250ms to 500ms (50%)
            y: 0
        },
        75: {  //from 500ms to 750ms (75%)
            backgroundColor: '#f00'  //red
        },
        100: {  //from 750ms to 1sec
            opacity: 0
        }
    }
});
</code></pre>

<h2>Animation Events</h2>

<p>Each animation you create has events for <a href="Ext.fx.Anim.html#beforeanimation" rel="Ext.fx.Anim#beforeanimation" class="docClass">beforeanimation</a>,
<a href="Ext.fx.Anim.html#afteranimate" rel="Ext.fx.Anim#afteranimate" class="docClass">afteranimate</a>, and <a href="Ext.fx.Anim.html#lastframe" rel="Ext.fx.Anim#lastframe" class="docClass">lastframe</a>.<br/>
Keyframed animations adds an additional <a href="Ext.fx.Animator.html#keyframe" rel="Ext.fx.Animator#keyframe" class="docClass">keyframe</a> event which
fires for each keyframe in your animation.</p>

<p>All animations support the <a href="Ext.util.Observable.html#listeners" rel="Ext.util.Observable#listeners" class="docClass">listeners</a> configuration to attact functions to these events.</p>

<pre class="prettyprint"><code>startAnimate: function() {
    var p1 = Ext.get('myElementId');
    p1.animate({
       duration: 100,
        to: {
            opacity: 0
        },
        listeners: {
            beforeanimate:  function() {
                // Execute my custom method before the animation
                this.myBeforeAnimateFn();
            },
            afteranimate: function() {
                // Execute my custom method after the animation
                this.myAfterAnimateFn();
            },
            scope: this
    });
},
myBeforeAnimateFn: function() {
  // My custom logic
},
myAfterAnimateFn: function() {
  // My custom logic
}
</code></pre>

<p>Due to the fact that animations run asynchronously, you can determine if an animation is currently
running on any target by using the <a href="Ext.util.Animate.html#getActiveAnimation" rel="Ext.util.Animate#getActiveAnimation" class="docClass">getActiveAnimation</a>
method.  This method will return false if there are no active animations or return the currently
running <a href="Ext.fx.Anim.html" rel="Ext.fx.Anim" class="docClass">Ext.fx.Anim</a> instance.</p>

<p>In this example, we're going to wait for the current animation to finish, then stop any other
queued animations before we fade our element's opacity to 0:</p>

<pre class="prettyprint"><code>var curAnim = p1.getActiveAnimation();
if (curAnim) {
    curAnim.on('afteranimate', function() {
        p1.stopAnimation();
        p1.animate({
            to: {
                opacity: 0
            }
        });
    });
}
</code></pre>
<div class="members"><div class="m-properties"><a name="properties"></a><div class="definedBy">Defined By</div><h3 class="prp p">Properties</h3><div id="property-hasActiveFx" class="member f ni"><a href="Ext.util.Animate.html#property-hasActiveFx" rel="property-hasActiveFx" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Animate.html" class="definedIn docClass">Ext.util.Animate</a><br/><a href="../source/Animate.html#Ext-util.Animate-property-hasActiveFx" class="viewSource">view source</a></div><a name="hasActiveFx"></a><a name="property-hasActiveFx"></a><a href="Ext.util.Animate.html#" rel="property-hasActiveFx" class="cls expand">hasActiveFx</a><span> : Object</span></div><div class="description"><div class="short">@deprecated 4.0 Replaced by getActiveAnimation
Returns thq current animation if this object has any effects actively ...</div><div class="long"><p>@deprecated 4.0 Replaced by <a href="Ext.util.Animate.html#getActiveAnimation" rel="Ext.util.Animate#getActiveAnimation" class="docClass">getActiveAnimation</a>
Returns thq current animation if this object has any effects actively running or queued, else returns false.</p>
</div></div></div><div id="property-stopFx" class="member ni"><a href="Ext.util.Animate.html#property-stopFx" rel="property-stopFx" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Animate.html" class="definedIn docClass">Ext.util.Animate</a><br/><a href="../source/Animate.html#Ext-util.Animate-property-stopFx" class="viewSource">view source</a></div><a name="stopFx"></a><a name="property-stopFx"></a><a href="Ext.util.Animate.html#" rel="property-stopFx" class="cls expand">stopFx</a><span> : Object</span></div><div class="description"><div class="short">Stops any running effects and clears this object's internal effects queue if it contains
any additional effects that ...</div><div class="long"><p>Stops any running effects and clears this object's internal effects queue if it contains
any additional effects that haven't started yet.</p>
</div></div></div></div><div class="m-methods"><a name="methods"></a><div class="definedBy">Defined By</div><h3 class="mth p">Methods</h3><div id="method-animate" class="member f ni"><a href="Ext.util.Animate.html#method-animate" rel="method-animate" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Animate.html" class="definedIn docClass">Ext.util.Animate</a><br/><a href="../source/Animate.html#Ext-util.Animate-method-animate" class="viewSource">view source</a></div><a name="animate"></a><a name="method-animate"></a><a href="Ext.util.Animate.html#" rel="method-animate" class="cls expand">animate</a>(
<span class="pre">Object config</span>)
 : Object</div><div class="description"><div class="short">Perform custom animation on this object.
This method is applicable to both the the Component class and the Element cl...</div><div class="long"><p>Perform custom animation on this object.<p>
<p>This method is applicable to both the the <a href="Ext.Component.html" rel="Ext.Component" class="docClass">Component</a> class and the <a href="Ext.core.Element.html" rel="Ext.core.Element" class="docClass">Element</a> class.
It performs animated transitions of certain properties of this object over a specified timeline.</p>
<p>The sole parameter is an object which specifies start property values, end property values, and properties which
describe the timeline. Of the properties listed below, only <b><code>to</code></b> is mandatory.</p>
<p>Properties include<ul>
<li><code>from</code> <div class="sub-desc">An object which specifies start values for the properties being animated.
If not supplied, properties are animated from current settings. The actual properties which may be animated depend upon
ths object being animated. See the sections below on Element and Component animation.<div></li>
<li><code>to</code> <div class="sub-desc">An object which specifies end values for the properties being animated.</div></li>
<li><code>duration</code><div class="sub-desc">The duration <b>in milliseconds</b> for which the animation will run.</div></li>
<li><code>easing</code> <div class="sub-desc">A string value describing an easing type to modify the rate of change from the default linear to non-linear. Values may be one of:<code><ul>
<li>ease</li>
<li>easeIn</li>
<li>easeOut</li>
<li>easeInOut</li>
<li>backIn</li>
<li>backOut</li>
<li>elasticIn</li>
<li>elasticOut</li>
<li>bounceIn</li>
<li>bounceOut</li>
</ul></code></div></li>
<li><code>keyframes</code> <div class="sub-desc">This is an object which describes the state of animated properties at certain points along the timeline.
it is an object containing properties who's names are the percentage along the timeline being described and who's values specify the animation state at that point.</div></li>
<li><code>listeners</code> <div class="sub-desc">This is a standard <a href="Ext.util.Observable.html#listeners" rel="Ext.util.Observable#listeners" class="docClass">listeners</a> configuration object which may be used
to inject behaviour at either the <code>beforeanimate</code> event or the <code>afteranimate</code> event.</div></li>
</ul></p>
<h3>Animating an <a href="Ext.core.Element.html" rel="Ext.core.Element" class="docClass">Element</a></h3>
When animating an Element, the following properties may be specified in <code>from</code>, <code>to</code>, and <code>keyframe</code> objects:<ul>
<li><code>x</code> <div class="sub-desc">The page X position in pixels.</div></li>
<li><code>y</code> <div class="sub-desc">The page Y position in pixels</div></li>
<li><code>left</code> <div class="sub-desc">The element's CSS <code>left</code> value. Units must be supplied.</div></li>
<li><code>top</code> <div class="sub-desc">The element's CSS <code>top</code> value. Units must be supplied.</div></li>
<li><code>width</code> <div class="sub-desc">The element's CSS <code>width</code> value. Units must be supplied.</div></li>
<li><code>height</code> <div class="sub-desc">The element's CSS <code>height</code> value. Units must be supplied.</div></li>
<li><code>scrollLeft</code> <div class="sub-desc">The element's <code>scrollLeft</code> value.</div></li>
<li><code>scrollTop</code> <div class="sub-desc">The element's <code>scrollLeft</code> value.</div></li>
<li><code>opacity</code> <div class="sub-desc">The element's <code>opacity</code> value. This must be a value between <code>0</code> and <code>1</code>.</div></li>
</ul>
<p><b>Be aware than animating an Element which is being used by an <a href="Ext.html" rel="Ext" class="docClass">Ext</a> Component without in some way informing the Component about the changed element state
will result in incorrect Component behaviour. This is because the Component will be using the old state of the element. To avoid this problem, it is now possible to
directly animate certain properties of Components.</b></p>
<h3>Animating a <a href="Ext.Component.html" rel="Ext.Component" class="docClass">Component</a></h3>
When animating an Element, the following properties may be specified in <code>from</code>, <code>to</code>, and <code>keyframe</code> objects:<ul>
<li><code>x</code> <div class="sub-desc">The Component's page X position in pixels.</div></li>
<li><code>y</code> <div class="sub-desc">The Component's page Y position in pixels</div></li>
<li><code>left</code> <div class="sub-desc">The Component's <code>left</code> value in pixels.</div></li>
<li><code>top</code> <div class="sub-desc">The Component's <code>top</code> value in pixels.</div></li>
<li><code>width</code> <div class="sub-desc">The Component's <code>width</code> value in pixels.</div></li>
<li><code>width</code> <div class="sub-desc">The Component's <code>width</code> value in pixels.</div></li>
<li><code>dynamic</code> <div class="sub-desc">Specify as true to update the Component's layout (if it is a Container) at every frame
of the animation. <i>Use sparingly as laying out on every intermediate size change is an expensive operation</i>.</div></li>
</ul>
<p>For example, to animate a Window to a new size, ensuring that its internal layout, and any shadow is correct:</p>
<pre><code>myWindow = Ext.create('Ext.window.Window', {
    title: 'Test Component animation',
    width: 500,
    height: 300,
    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    items: [{
        title: 'Left: 33%',
        margins: '5 0 5 5',
        flex: 1
    }, {
        title: 'Left: 66%',
        margins: '5 5 5 5',
        flex: 2
    }]
});
myWindow.show();
myWindow.header.el.on('click', function() {
    myWindow.animate({
        to: {
            width: (myWindow.getWidth() == 500) ? 700 : 500,
            height: (myWindow.getHeight() == 300) ? 400 : 300,
        }
    });
});
</code></pre>
<p>For performance reasons, by default, the internal layout is only updated when the Window reaches its final <code>"to"</code> size. If dynamic updating of the Window's child
Components is required, then configure the animation with <code>dynamic: true</code> and the two child items will maintain their proportions during the animation.</p>

<h3 class="pa">Parameters</h3><ul><li><span class="pre">config</span> : Object<div class="sub-desc"><p>An object containing properties which describe the animation's start and end states, and the timeline of the animation.</p>
</div></li></ul><h3 class="pa">Returns</h3><ul><li><span class="pre">Object</span>&nbsp; &nbsp;<p>this</p>
</li></ul></div></div></div><div id="method-getActiveAnimation" class="member ni"><a href="Ext.util.Animate.html#method-getActiveAnimation" rel="method-getActiveAnimation" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Animate.html" class="definedIn docClass">Ext.util.Animate</a><br/><a href="../source/Animate.html#Ext-util.Animate-method-getActiveAnimation" class="viewSource">view source</a></div><a name="getActiveAnimation"></a><a name="method-getActiveAnimation"></a><a href="Ext.util.Animate.html#" rel="method-getActiveAnimation" class="cls expand">getActiveAnimation</a> : Mixed</div><div class="description"><div class="short"><p>Returns thq current animation if this object has any effects actively running or queued, else returns false.</p>
</div><div class="long"><p>Returns thq current animation if this object has any effects actively running or queued, else returns false.</p>
<h3 class="pa">Returns</h3><ul><li><span class="pre">Mixed</span>&nbsp; &nbsp;<p>anim if element has active effects, else false</p>
</li></ul></div></div></div><div id="method-sequenceFx" class="member ni"><a href="Ext.util.Animate.html#method-sequenceFx" rel="method-sequenceFx" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Animate.html" class="definedIn docClass">Ext.util.Animate</a><br/><a href="../source/Animate.html#Ext-util.Animate-method-sequenceFx" class="viewSource">view source</a></div><a name="sequenceFx"></a><a name="method-sequenceFx"></a><a href="Ext.util.Animate.html#" rel="method-sequenceFx" class="cls expand">sequenceFx</a> : Ext.core.Element</div><div class="description"><div class="short">Ensures that all effects queued after sequenceFx is called on this object are
run in sequence.  This is the opposite ...</div><div class="long"><p>Ensures that all effects queued after sequenceFx is called on this object are
run in sequence.  This is the opposite of <a href="Ext.util.Animate.html#syncFx" rel="Ext.util.Animate#syncFx" class="docClass">syncFx</a>.</p>
<h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.core.Element</span>&nbsp; &nbsp;<p>The Element</p>
</li></ul></div></div></div><div id="method-stopAnimation" class="member ni"><a href="Ext.util.Animate.html#method-stopAnimation" rel="method-stopAnimation" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Animate.html" class="definedIn docClass">Ext.util.Animate</a><br/><a href="../source/Animate.html#Ext-util.Animate-method-stopAnimation" class="viewSource">view source</a></div><a name="stopAnimation"></a><a name="method-stopAnimation"></a><a href="Ext.util.Animate.html#" rel="method-stopAnimation" class="cls expand">stopAnimation</a> : Ext.core.Element</div><div class="description"><div class="short">@deprecated 4.0 Replaced by stopAnimation
Stops any running effects and clears this object's internal effects queue i...</div><div class="long"><p>@deprecated 4.0 Replaced by <a href="Ext.util.Animate.html#stopAnimation" rel="Ext.util.Animate#stopAnimation" class="docClass">stopAnimation</a>
Stops any running effects and clears this object's internal effects queue if it contains
any additional effects that haven't started yet.</p>
<h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.core.Element</span>&nbsp; &nbsp;<p>The Element</p>
</li></ul></div></div></div><div id="method-syncFx" class="member ni"><a href="Ext.util.Animate.html#method-syncFx" rel="method-syncFx" class="expand more ar"><span>&nbsp;</span></a><div class="title"><div class="meta"><a href="Ext.util.Animate.html" class="definedIn docClass">Ext.util.Animate</a><br/><a href="../source/Animate.html#Ext-util.Animate-method-syncFx" class="viewSource">view source</a></div><a name="syncFx"></a><a name="method-syncFx"></a><a href="Ext.util.Animate.html#" rel="method-syncFx" class="cls expand">syncFx</a> : Ext.core.Element</div><div class="description"><div class="short">Ensures that all effects queued after syncFx is called on this object are
run concurrently.  This is the opposite of ...</div><div class="long"><p>Ensures that all effects queued after syncFx is called on this object are
run concurrently.  This is the opposite of <a href="Ext.util.Animate.html#sequenceFx" rel="Ext.util.Animate#sequenceFx" class="docClass">sequenceFx</a>.</p>
<h3 class="pa">Returns</h3><ul><li><span class="pre">Ext.core.Element</span>&nbsp; &nbsp;<p>The Element</p>
</li></ul></div></div></div></div></div></div></div><div id="pageContent"></div></div></div></div></body></html>